import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'
import Minechild1 from './Minechild1';
import Minechild2 from './Minechild2'
import Notfind from './Notfind';
class Mine extends Component {
    render() {
        return (
            <div>
                我是我的页
                {/*
                 注意: 二级路由规则需要在当前显示的一级组件中设置, 同时二级路由的path 
                 需要拼接以及路由的path

                 注意: 当同时显示多个组件的时候, 为了只显示一个组件,可以使用Switch 组件
                 // 进行对所有的Route组件进行包裹,switch会对所有的路由规则做判断,从上到下
                 // 只要有一个匹配的路由, 就直接不再往下匹配了

                 

                */}
                <Switch>
                    <Route path='/mine/mine1' component={Minechild1}></Route>
                    <Route path='/mine/mine2' component={Minechild2}></Route>
                    {/*方式1:  默认显示一级路由下的二级路由组件 */}
                    {/* <Route path='/mine' component={Minechild1}></Route> */}
                    {/* 方式2: 使用重定向,使用Redirect组件.react-router-dom
                        注意: 使用重定向的时候,一般配合严格模式 exact 属性使用  
                     */}
                    <Redirect from='/mine' to='/mine/mine2' exact></Redirect>
                    {/* <Redirect from='/mine' to='/mine/mine2'></Redirect> */}
                    <Route component={Notfind}></Route>
                </Switch>
            </div>
        );
    }
}

export default Mine;
